<template>
    <div calss='form' style="padding:10px">
        <g-formItem type="input" :value="title" label="表单名称" valueKey="title" @valueChange="valueChange"></g-formItem>
        <g-formItem type="input" :value="placeholder" valueKey="placeholder" label="提示文字"
            @valueChange="valueChange"></g-formItem>
        <g-formItem type="input" :value="message" valueKey="message" label="未填写提示信息"
            @valueChange="valueChangeRule"></g-formItem>
        <g-formItem type="switch" :value="required" valueKey="required" label="必填项"
            @valueChange="valueChangeRule"></g-formItem>

    </div>
</template>
<script setup>
import { computed ,ref, watchEffect , toRef , reactive } from 'vue'
import { componentsNameList } from '@/store/pinia';
let options = {}
watchEffect(()=>{
    options = componentsNameList().selectOption
})
let title =  computed(()=> options.title)
let placeholder = options?.placeholder
const required = computed(()=>options?.rule.required)
const message = options?.rule.message
const valueChange = (value, key) => {
    console.log(options);
    // key要和formOptions里面的字段保持一致
    options[key] = value
}
/* 修改rule */
const valueChangeRule = (value, key) => {
    // key要和formOptions里面的字段保持一致
    options.rule[key] = value
}
</script>
    
<style scoped>
::v-deep.el-form-item {
    margin-bottom: 20px !important;
}
</style>